@import '~antd/es/style/themes/default.less';
@import '~@/global.less';

.steps-steps {
  width: 100%;
  margin-bottom: 17px;
  padding-bottom: 17px;
  border-bottom: 1px solid #f0f0f0;
}

.steps-content {
  width: 100%;
}

.trigger-way-warp {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  width: 100%;

  .trigger-way-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 237px;
    //width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0e4e8;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s;

    .way-item-title {
      span {
        font-size: 16px;
      }
      .way-item-label {
        padding-right: 6px;
        color: rgba(#000, 0.64);
      }

      .way-item-icon {
        color: rgba(#000, 0.5);
      }
    }

    .way-item-image {
      margin: 0 !important;
      opacity: 0.6;
    }

    &:hover {
      //color: @primary-color-hover;
      .way-item-image {
        opacity: 0.8;
      }
    }

    &.active {
      border-color: @primary-color-active;
      .way-item-image {
        opacity: 1;
      }
    }

    &.labelBottom {
      flex-direction: column-reverse;
      grid-gap: 16px;
      gap: 0;
      align-items: center;
      width: auto;
      padding: 8px 16px;
      p {
        margin: 0;
      }
    }
  }

  &.disabled {
    .trigger-way-item {
      cursor: not-allowed;

      &:hover {
        color: initial;
        opacity: 0.6;
      }

      &.active {
        opacity: 1;
      }
    }
  }
}

.device-title {
  top: 5px;
  left: 0;
  width: 760px;
  height: 38px;
  padding: 8px 16px 8px 16px;
  background: rgba(250, 178, 71, 0.1);
  border: 1px solid rgba(250, 178, 71, 0.4);
  border-radius: 4px;

  .device-title-icon {
    margin-right: 5px;
    color: #fab247;
  }
}

.trigger-options-content {
  .trigger-options-name {
    .ellipsisFn(1, 310px);
  }
}
